<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() +
            "://"
            + request.getServerName() + ":"
            + request.getServerPort()
            + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <script src="ECharts/echarts.min.js"></script>
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function (){
            $.ajax({
                url:"workbench/teacher/analyse/getFinishedSituation.do",
                data:{
                    "eid":'${param.eid}'
                },
                type:"post",
                dataType:"json",
                success:function (data){
                    var unfinishedCount=data.unfinishedCount;
                    var finishedCount=data.finishedCount;
                    getCharts1(unfinishedCount,finishedCount);
                }
            })

            $.ajax({
                url:"workbench/teacher/analyse/getExamination.do",
                data:{
                    "eid":'${param.eid}'
                },
                type:"post",
                dataType:"json",
                success:function (data){
                    $("#name").html("试卷名称:"+data.eName)
                    $("#count").html("题目总数："+data.count)
                    $("#score").html("总分："+data.count*10)
                }
            })

            $.ajax({
                url:"workbench/teacher/analyse/getExaminationSituation.do",
                data:{
                    "eid":'${param.eid}'
                },
                type:"post",
                dataType:"json",
                success:function (data){
                    var names=data.names;
                    var scores=data.scores;
                    getCharts2(names,scores);
                }
            })

            $.ajax({
                url:"workbench/teacher/analyse/getExaminationSituationList.do",
                data:{
                    "eid":'${param.eid}'
                },
                type:"post",
                dataType:"json",
                success:function (data){
                    var html=""
                    $.each(data,function (i,n){
                    html+='<tr>',
                    html+='<td>'+n.stuName+'</td>',
                    html+='<td>'+n.score+'</td>',
                    html+='<td>'+n.finishTime+'</td>',
                    html+='<td><a href="workbench/teacher/analyse/detail.do?stuId='+n.studentId+'&eid='+n.eid+'">查看具体答题情况</a> </td>',
                    html+='</tr>'
                    })
                    $("#content").html(html)
                }
            })

        })

        //饼状图
        function getCharts1(unfinishedCount,finishedCount) {
            // 基于准备好的dom，初始化echarts实例
            var myChart1 = echarts.init(document.getElementById('chart1'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '学生完成情况',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: unfinishedCount, name: '未完成' },
                            { value: finishedCount, name: '已完成' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 用刚指定的配置项和数据显示图表。
            myChart1.setOption(option);
        }

        //折线图
        function getCharts2(names,scores) {
            // 基于准备好的dom，初始化echarts实例
            var myChart2 = echarts.init(document.getElementById('chart2'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '学生成绩情况'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['分数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: names
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '分数',
                        type: 'line',
                        stack: 'Total',
                        data: scores
                    },
                ]
            };
            // 用刚指定的配置项和数据显示图表。
            myChart2.setOption(option);
        }



    </script>

</head>
<body>
<h3 id="name"></h3>
<h3 id="count"></h3>
<h3 id="score"></h3>
<hr>
<h2>学生完成情况如下图</h2>
<br>
<span id="chart1" style="position: relative;left:10%;width: 800px;height:600px;" ></span>
<br><br>
<hr>
<h2>学生成绩情况如下图</h2>
<br>
<br>
<span id="chart2" style="position: relative;left:20%;width: 800px;height:500px;"></span>
<br><br>
<hr>
<h2>学生具体情况如下表</h2>
     <table border="1" cellspacing="0" style="position:relative;width: 600px;height: 100px;left: 20%">
         <tr>
            <th style="text-align: center">学生姓名</th>
            <th style="text-align: center">分数</th>
            <th style="text-align: center">完成时间</th>
            <th style="text-align: center">操作</th>
         </tr>
         <tbody id="content" style="text-align: center">

         </tbody>
     </table>
    <br><br><br>
</body>
</html>